import React, { useState } from 'react';
import "./TenantManagement.scss"
import { Button, Input, Radio, Space, Table, Switch, ConfigProvider } from "antd"
import { SyncOutlined, UnlockOutlined, EditOutlined, FileSearchOutlined } from "@ant-design/icons"

import zhCN from 'antd/locale/zh_CN';

let { Search } = Input

const TenantManagement = () => {
    const [locale] = useState(zhCN);
    let [loading, setLoading] = useState(false)
    let onSearch = (value: string) => {
        console.log("获取输入框的值：", value);
    }
    // let onbtns = (e: any) => {


    // }
    // let btns = ["全部", "启动", "禁用"]
    let [statubtns] = useState([
        { label: '全部', value: '全部' },
        { label: '启动', value: '启动' },
        { label: '禁用', value: '禁用' },
    ])
    let renderstatus = (e: any) => {
        // console.log("点击了：", e.target.value);
        if (e.target.value === "全部") {
            console.log("点击了全部");
        } else if (e.target.value === "启动") {
            console.log("点击了启动");
        } else if (e.target.value === "禁用") {
            console.log("点击了禁用");
        }
    }
    let switchstatus = () => {

    }

    const columns: any = [
        {
            title: '操作',
            key: 'action',
            render: (_: any, record: any, index: any) => (
                <Space size="middle">
                    <Button><FileSearchOutlined /></Button>
                    <Button><EditOutlined /></Button>
                    <Button><UnlockOutlined /></Button>
                </Space>
            ),
        },
        {
            title: '企业名称',
            dataIndex: 'user',
            key: 'user',
        },
        {
            title: '企业信用代码',
            dataIndex: 'admin',
            key: 'admin',
        },
        {
            title: '企业类型',
            dataIndex: 'userclassify',
            key: 'userclassify',
        },
        {
            title: '联系人',
            key: 'phonename',
            dataIndex: 'phonename'
        },
        {
            title: '联系电话',
            key: 'phone',
            dataIndex: 'phone'
        },
        {
            title: '状态',
            key: 'status',
            render: (_: any, record: any, index: any) => (
                <Space size="middle">
                    <Switch checkedChildren="启动" unCheckedChildren="禁用" defaultChecked onChange={switchstatus} />
                </Space>
            )
        },
        {
            title: '到期日期',
            key: 'createtime',
            dataIndex: 'createtime'
        },
    ];

    const data: any = [
        {
            key: '1',
            user: '小明童鞋',
            admin: "us10001",
            phone: '13712348768',
            phonename: "李四",
            userclassify: "珠宝",
            createtime: "2023-07-10 08:00:01",
        },
        {
            key: '2',
            user: '小灰灰童鞋',
            admin: "us10002",
            phone: '13712348767',
            phonename: "王五",
            userclassify: "总店",
            createtime: "2023-07-10 08:00:02",
        },
        {
            key: '3',
            user: '茂茂童鞋',
            admin: "us10003",
            phone: '13712348766',
            phonename: "马六",
            userclassify: "黄金",
            createtime: "2023-07-10 08:00:03",
        }
    ]
    // let showtotal = (total: any) => `Total ${total} items`
    return (
        <div className='tenantmanagement_box'>
            <div className="function_box">
                <div className="addbtn_box">
                    <Button type="primary">新增用户</Button>
                </div>
                <div className="btns_box">
                    <div className="status_box" >
                        <Radio.Group options={statubtns} onChange={renderstatus} optionType="button" defaultValue="全部" />
                    </div>
                    <div className="search_box">
                        <Search
                            placeholder="请输入用户名、账号关键字"
                            allowClear
                            enterButton="搜索"
                            size="middle"
                            onSearch={onSearch}
                        />
                    </div>
                    <div className="iocnbtns">
                        <div className="reset">
                            <SyncOutlined />
                        </div>
                    </div>
                </div>
            </div>
            <div className="table_box">
                <ConfigProvider locale={locale}>
                    <Table columns={columns} dataSource={data} size="middle" loading={loading} pagination={{ position: ["bottomCenter"], pageSize: 1, showQuickJumper: true, total: 20, showTotal: (total: any) => `共 ${total} 条数据` }} />
                </ConfigProvider>
            </div>
        </div>
    );
};

export default TenantManagement;